import React, { Fragment, useState, useEffect } from 'react';
import type { FC } from 'react';
import { Calendar, Badge, Drawer, Card } from 'antd';
import style from './index.less';
import { Link, useHistory, useRequest } from 'umi';
import { ColumnChart } from 'bizcharts';
import { WordCloud } from '@ant-design/charts';
import { getWordCloud } from './service';
const Choose: FC<Record<string, any>> = () => {
  // 数据源
  // const data = [
  //   {
  //     type: '前端',
  //     sales: 38,
  //   },
  //   {
  //     type: '后端',
  //     sales: 52,
  //   },
  //   {
  //     type: '人工智能',
  //     sales: 61,
  //   },
  //   {
  //     type: '机器学习',
  //     sales: 145,
  //   },
  //   {
  //     type: '数据可视化',
  //     sales: 15,
  //   },
  // ];
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    getWordCloud({}).then(res => {
      console.log(res.data, '🐢');
      const wordCloudData: [] = (res.data || []).map(item => ({
        id: Number(Date.now()),
        word: item.keyword,
        weight: item.count,
      }));
      setData(wordCloudData);
    });
  }, []);
  return (
    <div className={style.cal}>
      {/* <ColumnChart
            data={data}
            title={{
              visible: true,
              text: '发布文章类别统计',
              style:{color:'rgb(28,156,254)'}
            }} 
            autoFit
            padding='auto'
            xField='type'
            yField='sales'
            height={300}
            width={300}
            meta={{
              type: {
                alias: '类别',
              },
              sales: {
                alias: '发布量',
              },
            }}
          /> */}
      <Card title="热门搜索" loading={loading} bordered={false} bodyStyle={{ overflow: 'hidden' }}>
        <WordCloud
          data={data}
          forceFit
          height={162}
          wordStyle={{
            fontSize: [20, 40],
          }}
          shape="triangle"
        />
        {/* <TagCloud data={data?.list || []} height={161} /> */}
      </Card>
    </div>
  );
};
export default Choose;
